<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var box1 = document.getElementById("box1");
            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");
            btn1.onclick = function () {
                /**
                 * 修改box1的宽度
                 * 修改的是内联样式
                 * 语法：元素.style.属性 = "值";
                 */
                box1.style.width = "500px";
                box1.style.height = "500px";
                //注意：属性名如果有-，则需要用驼峰命名法
                // box1.style.background-color = "blue";
                box1.style.backgroundColor = "blue";
            }

            /**
             * 读取样式:
             *   注意：这种方式读取的是内联样式，如果样式没有设置，则返回空字符串
             */
            btn2.onclick = function () {
                alert(box1.style.width)
            }
        }
    </script>
</head>
<body>
<button id="btn1">点我</button>
<button id="btn2">读取样式</button>

<div id="box1">

</div>
</body>

<style>
    #box1 {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

</html>
